/**
 * @description 一个弹窗组件
 * @author tao
 */

define(['jquery', 'jqueryUI'], function ($, $UI) {
    'use strict';

    /**
     * @param {Object} config
     * @returns {Window}
     */

    function Window() {
        this.config = {
            width: 500,
            height: 300,
            title: '系统消息',
            content: '',
            handler: null,
            hasMask: true,
            hasCloseBtn: false,
            isDraggable: true,
            dragHandle: null,
            skinClassName: null,
            textForAlertBtn: '确定',
        };
        this.handlers = {};
    }

    Window.prototype = {

        /**
         * @description bind event
         * @type {void}
         * @param {String} type
         * @param {Function} handler
         */

        on: function (type, handler) {
            if (typeof this.handlers[type] === 'undefined') {
                this.handlers[type] = [];
            }
            this.handlers[type].push(handler);
        },

        /**
         * @description launch event
         * @type {void}
         * @param {String} type
         * @param {Function} handler
         */

        fire: function (type, data) {
            if (this.handlers[type] instanceof Array) {
                let handlers = this.handlers[type];
                for (let i = 0, len = handlers.length; i < len; i++) {
                    handlers[i](data);
                }
            }
        },

        /**
         * @description 模拟 alert 弹窗方法
         */
        alert: function (config) {

            const CONFIG = $.extend(this.config, config);
            let boundingBox = $(
                    '<div class="window_boundingBox">' +
                    '<div class="window_header">' + CONFIG.title + '</div>' +
                    '<div class="window_body">' + CONFIG.content + '</div>' +
                    '<div class="window_footer"><input type="button" value="' + CONFIG.textForAlertBtn + '" class="btn"></div>' +
                    '</div>'),
                mask = null,
                that = this;
            if (CONFIG.hasMask) {
                mask = $('<div class="window_mask"></div>');
                mask.appendTo('body');
            }
            boundingBox.appendTo('body');
            let btn = $('.window_footer input');
            btn.click(function () {
                CONFIG.handler && CONFIG.handler();
                CONFIG.hasMask && mask.remove();
                boundingBox.remove();
                that.fire('alert');
            });

            boundingBox.css({
                width: CONFIG.width + 'px',
                height: CONFIG.height + 'px',
                left: (CONFIG.x || (window.innerWidth - CONFIG.width) / 2) + 'px',
                top: (CONFIG.y || (window.innerHeight - CONFIG.height) / 2) + 'px'
            });

            if (CONFIG.hasCloseBtn) {
                let closeBtn = $('<span class="window_closeBtn">X</span>');
                closeBtn.appendTo(boundingBox);
                closeBtn.click(function () {
                    CONFIG.hasMask && mask.remove();
                    boundingBox.remove();
                    that.fire('close');
                });
            }

            if (CONFIG.skinClassName) {
                boundingBox.addClass(CONFIG.skinClassName);
            }

            if (CONFIG.isDraggable) {
                if (CONFIG.dragHandle) {
                    boundingBox.draggable({
                        handle: CONFIG.dragHandle
                    });
                } else {
                    boundingBox.draggable();
                }
            }
            return this;
        },
        confirm: function (params) {

        },
        prompt: function (params) {

        }
    }
    return {
        Window: Window
    }
});